import { Button } from 'antd';
import { WeaInput } from 'ecCom';
import * as React from 'react';
import './index.less';
export default class DropSelect extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: props.value
        }
    }
    componentDidMount() {
        document.addEventListener("click", this.hide);
    }
    componentWillUnmount() {
        document.removeEventListener("click", this.hide);
    }
    componentWillReceiveProps(props) {
        this.setState({
            value: props.value
        })
    }
    render() {
        const { valueToStyleName, options, bf, inputCom, dropWidth, dropCom, isBorder } = this.props;
        const { value } = this.state;
        const style = bf ? { borderLeft: bf } : {};
        return (
            <div className="edc-drop-select" style={this.props.style}>
                {inputCom ? inputCom : <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@5dvapl`}
                    className="input"
                    style={{ fontSize: 'inherit', ...style }}
                    value={value}
                    viewAttr={2}
                    onChange={this.onChange}
                    title={value}
                />}
                {dropCom ? null : <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@hvr3wp`} className="drop-btn" onClick={this.toggerDropSelect}><i className={this.state.visible ? "icon-coms-up2" : "icon-coms-down2"} /></Button>}
                {dropCom ? dropCom : <div className="drop-select" style={{ display: this.state.visible ? 'block' : 'none', width: dropWidth }} >
                    {options && options.map(d => (
                        <div
                            key={d.id}
                            title={isBorder ? d.title : d.showname}
                            style={valueToStyleName ? { [valueToStyleName]: d.id, fontSize: 'inherit' } : { fontSize: 'inherit' }}
                            onClick={this.onChange.bind(this, d.id)}
                            className={`drop-select-option${d.id === value ? ' drop-select-option-active' : ''}`}>
                            {d.showname}
                        </div>
                    ))}
                </div>}
            </div>
        )
    }
    hide = () => {
        this.setState({ visible: false });
    }
    toggerDropSelect = () => {
        if (!this.state.visible) {
            setTimeout(() => {
                this.setState({
                    visible: !this.state.visible
                });
            }, 50);
        }
        this.setState({
            visible: !this.state.visible
        })
    }
    onChange = (value) => {
        this.setState({ value }, () => {
            if (typeof this.props.onChange === 'function') {
                this.props.onChange(value);
            }
        });
    }
}